<template>
<div>
    <div v-show="flag">
      <div style="text-align:left;">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="按需查询">
              <el-input placeholder="姓名" v-model="hmName" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-input placeholder="手机号码" v-model="hmPhone" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-select v-model="hmDisplayState" placeholder="展示状态" style="width:230px">
                <el-option label="已展示" value="0"></el-option>
                <el-option label="未展示" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                <el-button type="success" icon="el-icon-brush" @click="clearCondition">清空条件</el-button>
            </el-form-item>
              <el-button type="primary" round style="float: right" @click="clickOrder"><i class="el-icon-star-off"></i>设置展示顺序</el-button>
        </el-form>
      </div>
      <el-table :data="tableData" border style="width: 100%">
          <el-table-column fixed prop="hmName" label="姓名" width="110"></el-table-column>
          <el-table-column prop="hmGender" label="性别" width="70"></el-table-column>
          <el-table-column prop="hmPhone" label="电话" width="130"></el-table-column>
          <el-table-column prop="hmBirthday" label="出生日期" width="130"></el-table-column>
          <el-table-column prop="hmNation" label="民族" width="150"></el-table-column>
          <el-table-column prop="hmDegree" label="文化程度" width="150"></el-table-column>
          <el-table-column prop="hmDisplayState" label="展示状态" width="100" :formatter="formatState1"></el-table-column>
          <el-table-column prop="hmEmail" label="邮箱" width="220"></el-table-column>
          <el-table-column fixed="right" label="操作" width="230">
              <template slot-scope="scope">
                <el-button type="text" @click="watchUser(scope.row)"><i class="el-icon-zoom-in"></i>查看详情</el-button>
                <el-button type="text" v-show="scope.row.hmDisplayState==0" @click="delCode(scope.row.hmId)"><i class="el-icon-circle-close"></i>移除展示</el-button>
                <el-button type="text" v-show="scope.row.hmDisplayState==1" @click="delCode1(scope.row.hmId)"><i class="el-icon-circle-check"></i>加入展示</el-button>
              </template>
          </el-table-column>
      </el-table>

      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[3, 5, 9, 15]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
      </el-pagination>
    </div>

    <!-- 查看详情 -->
    <el-dialog title="详情页" :visible.sync="dialogVisible" width="70%" >
      <el-descriptions title="查看用户详情" direction="vertical" :column="4" border>
        <el-descriptions-item label="姓名">{{watchDetails.hmName}}</el-descriptions-item>
        <el-descriptions-item label="账号">{{watchDetails.hmUsername}}</el-descriptions-item>
        <el-descriptions-item label="身份证号码">{{watchDetails.hmIdentity}}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{watchDetails.hmPhone}}</el-descriptions-item>
        <el-descriptions-item label="角色">{{watchDetails.roleId == 1 ? '系统管理员' : '健康管理师'}}</el-descriptions-item>
        <el-descriptions-item label="出生日期"><el-tag>{{watchDetails.hmBirthday}}</el-tag></el-descriptions-item>
        <el-descriptions-item label="年龄">{{watchDetails.hmAge}}</el-descriptions-item>
        <el-descriptions-item label="性别">{{watchDetails.hmGender}}</el-descriptions-item>
        <el-descriptions-item label="民族">{{watchDetails.hmNation}}</el-descriptions-item>
        <el-descriptions-item label="文化程度">{{watchDetails.hmDegree}}</el-descriptions-item>
        <el-descriptions-item label="注册时间" :span="2">{{watchDetails.hmCreateDate}}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{watchDetails.hmEmail}}</el-descriptions-item>
        <el-descriptions-item label="联系地址" :span="3">{{watchDetails.hmAddress}}</el-descriptions-item>
        <el-descriptions-item label="个人说明" :span="4">{{watchDetails.hmDesc}}</el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    <div v-show="!flag" style="text-align:center;background-color:#F6F6EA;margin-top:35px;">
      <h2>设置展示顺序</h2>
      <h5>（直接按住姓名进行拖拽排序，最后确认即可）</h5>
      <div style="width:400px;display:inline-block;">
        <el-tree
          :data="treeData"
          node-key="id"
          ref="treeRef"
          draggable>
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <i class="el-icon-thumb"></i>
            <span>{{ node.label }}</span>
            <span>
              &nbsp;&nbsp;&nbsp;
              <el-button type="text" size="mini"> {{data.gender}} </el-button>
              <el-button type="text" size="mini"> {{data.age}} </el-button>
              <el-button type="text" size="mini"> {{data.degree}} </el-button>
            </span>
          </span>
        </el-tree>
        <div style="margin-top:35px">
          <el-button type="primary" plain @click="submitOrder">确认排序</el-button>
          <el-button type="success" plain @click="flag=true">返回列表</el-button>
        </div>
      </div>
    </div>

</div>
</template>

<script>
export default {
  name: 'Specialist',
  data () {
    return {
      tableData: [],
      total: 0,
      currentPage: 1,
      pageSize: 5,
      hmName: '',
      hmPhone: '',
      hmDisplayState: '',
      dialogVisible: false,
      watchDetails: {},
      treeData: [],
      flag: true
    }
  },
  methods: {
    // 初始化页面数据
    initUser () {
      this.$axios.post(`/api/DHHealthManagerController/findLikeUser1?pageNum=${this.currentPage}&pageSize=${this.pageSize}&hmName=${this.hmName}&hmPhone=${this.hmPhone}&hmDisplayState=${this.hmDisplayState}`).then(({data}) => {
        this.tableData = data.rows
        this.total = data.total
      })
    },
    formatState1 (row, column) { return row.hmDisplayState === 0 ? '展示中' : row.hmDisplayState === 1 ? '未展示' : '未知' },
    // 清空条件
    clearCondition () {
      this.hmName = ''
      this.hmPhone = ''
      this.hmAge = ''
    },
    // 改变页大小
    handleSizeChange (value) {
      this.pageSize = value
      this.initUser()
    },
    // 改变当前页码
    handleCurrentChange (value) {
      this.currentPage = value
      this.initUser()
    },
    // 查看详情
    watchUser (row) {
      this.dialogVisible = true
      this.watchDetails = row
    },
    // 设为不展示
    delCode (id) {
      this.$confirm('确定要将该健康师从展示列表中移除吗？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post(`/api/DHHealthManagerController/delDisplayUser?hmId=${id}&hmDisplayState=1`).then(result => {
          this.$message({
            type: 'success',
            message: '移除成功!'
          })
          this.initUser()
        })
      }).catch(() => {
        this.$message('已取消操作')
      })
    },
    // 设为展示
    delCode1 (id) {
      this.$confirm('确定要将该健康师展示到列表中吗？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post(`/api/DHHealthManagerController/delDisplayUser?hmId=${id}&hmDisplayState=0`).then(result => {
          this.$message({
            type: 'success',
            message: '展示成功!'
          })
          this.initUser()
        })
      }).catch(() => {
        this.$message('已取消操作')
      })
    },
    // 点击查询
    search: function () {
      this.currentPage = 1
      this.initUser()
    },
    // 点击查看排序
    clickOrder () {
      this.$axios.post(`/api/DHHealthManagerController/queryDisplayOrder`).then(({data}) => {
        this.flag = false
        let arr = []
        data.forEach(e => {
          let temp = {}
          temp.id = e.hmId
          temp.label = e.hmName
          temp.gender = e.hmGender
          temp.age = e.hmAge
          temp.degree = e.hmDegree
          arr.push(temp)
        })
        this.treeData = arr
      })
    },
    // 确认排序
    submitOrder () {
      this.$confirm('确认提交排序吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let arr = []
        this.treeData.forEach(e => {
          arr.push(e.id)
        })
        this.$axios.post(`/api/DHHealthManagerController/upDisplayOrder?hmIds=${arr}`).then(result => {
          this.clickOrder()
          this.$message({
            type: 'success',
            message: '排序成功!'
          })
        })
      }).catch(() => {
        this.$message('已取消提交')
      })
    }
  },
  created: function () {
    this.initUser()
  }
}
</script>
